<template>
  <el-dialog title="合并账页"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="80px">
      <h3>主账页信息</h3>
      <hr>
      <br />
      <el-row>
        <el-col :span="8">
          <el-form-item label="货主"
                        prop="cargoOwnerName">
            <auto-search-name v-model="form.cargoOwnerName"
                              placeholder="请选择" 
                              :disabled="true" 
                              @selectName="v=>form.cargoOwnerName=v"
                              @selectId="v=>form.cargoOwnerId=v"
                              :name="form.cargoOwnerName"></auto-search-name>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="品名"
                        prop="cargoName">
            <el-select v-model="form.cargoName"
                        :disabled="true"
                        placeholder="请选择">
              <el-option v-for="item in shipperDatas"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- </el-row>
      <el-row> -->
        <el-col :span="8">
          <el-form-item label="材质"
                        prop="">
            <el-select v-model="form.material"
                        :disabled="true"
                        placeholder="请选择">
              <el-option v-for="item in shipperDatas"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家"
                        prop="madeBy">
            <el-input v-model="form.madeBy"
                      :disabled="true"
                      placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管理方式"
                        prop="manageWay">
            <el-select v-model="form.manageWay"
                        :disabled="true"
                        placeholder="请选择">
              <el-option v-for="[key, val] in _dictManagement"
                         :key="key"
                         :label="val"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- </el-row>
      <el-row> -->
        <el-col :span="8">
          <el-form-item label="计量方式"
                        prop="measureWay">
            <el-select v-model="form.measureWay"
                        :disabled="true"
                        placeholder="请选择">
              <el-option v-for="[key, val] in _dictMeterStyle"
                         :key="key"
                         :label="val"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账页类型"
                        prop="accountPageType">
            <el-select v-model="form.accountPageType"
                        :disabled="true"
                        placeholder="请选择">
              <el-option v-for="[key, val] in _dictControlWay"
                         :key="key"
                         :label="val"
                         :value="key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="规格"
                        required
                        style="margin-bottom: 0;">
            <el-col :span="8">
              <el-form-item prop="normOne"
                            class="gg-input">
                <el-select v-model="form.normOne"
                          :disabled="true"
                           style="width: 100px;">
                  <el-option v-for="item in shipperDatas"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="normTwo"
                            class="gg-input">
                <el-select v-model="form.normTwo"
                          :disabled="true"
                           style="width: 100px;">
                  <el-option v-for="item in shipperDatas"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="normThree"
                            class="gg-input">
                <el-select v-model="form.normThree"
                          :disabled="true"
                           style="width: 100px;">
                  <el-option v-for="item in shipperDatas"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <h3>副账页信息</h3>
      <hr>
      <el-row style="padding: 10px 0;">
        <el-checkbox-group v-model="checkList" @change="searchCheckList">
          <el-checkbox label="管理方式"></el-checkbox>
          <el-checkbox label="计量方式"></el-checkbox>
        </el-checkbox-group>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="viceAccountList"
                    border
                    max-height="300"
                    @selection-change="handleMergeSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="客户"
                             prop="cargoOwnerName"
                             min-width="150">
            </el-table-column>
            <el-table-column label="账页类型"
                             prop="accountPageType"
                             min-width="150">
              <template slot-scope='scope'>
                  {{scope.row.accountPageType | _filterAccountPageType }}
              </template>
            </el-table-column>
            <el-table-column label="品名"
                             prop="cargoName"
                             min-width="150">
            </el-table-column>
            <el-table-column label="结存重量"
                             prop="balanceWeight"
                             width="80">
            </el-table-column>
            <el-table-column label="结存件数"
                             prop="balanceCount"
                             width="80">
            </el-table-column>
            <el-table-column label="预上量"
                             prop="preWeight"
                             width="80">
            </el-table-column>
            <el-table-column label="规格"
                             prop="cargoName"
                             min-width="150">
              <template slot-scope='scope'>
                  {{''+scope.row.normOne +'*'+ scope.row.normTwo +'*'+ scope.row.normThree }}
              </template>
            </el-table-column>
            <el-table-column label="材质"
                             prop="preWeight"
                             width="80">
            </el-table-column>
            <el-table-column label="生产厂家"
                             prop="madeBy"
                             width="80">
            </el-table-column>
            <el-table-column label="管理方式"
                             prop="manageWay"
                             width="80">
                <template slot-scope='scope'>
                    {{''+scope.row.manageWay | _filterManagement}}
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column label="计量方式"
                             prop="measureWay"
                             width="80">
              <template slot-scope='scope'>
                    {{''+scope.row.measureWay | _filterMeterStyle}}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">返 回</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">合 并</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addThings, updateThings } from '@/api/things/things'
import autoCargo from '@/components/autocomplete/autoCargo'
import autoSearchDic from '@/components/autocomplete/autoSearchDic'
import autoSearchName from '@/components/autocomplete/autoSearchName' //货主组件
import { management, meterStyle } from '../../../../assets/dict'
import { maxLength, sortLength } from '@/utils/rules'
import {
  findViceAccount,
  getCargoOwnerAccount,
  postMergeAccount
} from '@/api/things/accountPageList'

export default {
  name: 'mergeAccountPageForm',
  components: { autoCargo, autoSearchDic, autoSearchName },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        shipper: [{ required: true, message: '请输入货主', trigger: 'blur' }],
        proName: [{ required: true, message: '请输入品名', trigger: 'blur' }],
        spec1: [{ required: true, message: '请输入规格1', trigger: 'blur' }],
        spec2: [{ required: true, message: '请输入规格2', trigger: 'blur' }],
        spec3: [{ required: true, message: '请输入规格3', trigger: 'blur' }]
      },
      dialogForm: false,
      isEdit: false,
      maxLot: 0,
      selectThingsType: [],
      selectGoodsType: [],
      selectGroductName: [],
      shipperDatas: [
        {
          value: '123',
          label: '本有科技'
        },
        {
          value: '124',
          label: '港九科技'
        }
      ],
      viceAccountList: [],
      cargoOwnerAccount: [],
      checkList: [],
      MergeMultipleSelection: []
    }
  },
  mounted() {
    //获取副账页列表
    // this.handleViceAccount()
    //获取货主
    getCargoOwnerAccount(this.$store.state.user.currentUser.org.id).then(
      res => {
        this.cargoOwnerAccount = res.data.aaData
      }
    )
  },
  methods: {
    clearForm() {
      return {
        id: null,
        orgId: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.cargoName,
        cargoTypeCode: '',
        cargoTypeName: '',
        // 新加
        cargoName: '', 
        cargoOwnerName: '', //货主
        cargoTypeName: '',
        madeBy: '',
        manageWay: '',
        manageWayDesc: '',
        material: '',
        normOne: '',
        normTwo: '',
        normThree: '',
        manageWay: '',
        measureWay: '',
        accountPageType: ''
      }
    },
    handleViceAccount() {
      let params = {
        search_EQ_accountPageType: this.form.accountPageType, //账页类型
        search_EQ_cargoName: this.form.cargoName,  //品名
        search_EQ_madeBy: this.form.madeBy,  //生产厂家
        search_EQ_manageWay: '',  //管理方式
        search_EQ_material: this.form.material,   //材质
        search_EQ_measureWay: '',  //计量方式
        search_EQ_normOne: this.form.normOne, //规格
        search_EQ_normThree: this.form.normThree,
        search_EQ_normTwo: this.form.normTwo,
        // search_EQ_warehouseCode: this.form.warehouseCode,  //所属仓库
        search_LIKE_accountpageNo: this.form.accountpageNo,  //账页号
        search_EQ_cargoOwnerId: this.form.cargoOwnerId,  //货主单位
        sortType: '',  //排序
      }
      this.findViceAccountApi(params);
    },
    searchCheckList() {
      let params = {
        search_EQ_accountPageType: this.form.accountPageType, //账页类型
        search_EQ_cargoName: this.form.cargoName,  //品名
        search_EQ_madeBy: this.form.madeBy,  //生产厂家
        search_EQ_manageWay: '',  //管理方式
        search_EQ_material: this.form.material,   //材质
        search_EQ_measureWay: '',  //计量方式
        search_EQ_normOne: this.form.normOne, //规格
        search_EQ_normThree: this.form.normThree,
        search_EQ_normTwo: this.form.normTwo,
        // search_EQ_warehouseCode: this.form.warehouseCode,  //所属仓库
        search_LIKE_accountpageNo: this.form.accountpageNo,  //账页号
        search_EQ_cargoOwnerId: this.form.cargoOwnerId,  //货主单位
        sortType: '',  //排序
      }
      if(this.checkList[0] == '管理方式') {
        params.search_EQ_manageWay = this.form.manageWay
      }
      if(this.checkList[0] == '计量方式') {
        params.search_EQ_measureWay = this.form.measureWay
      }
      if(this.checkList.length == 2) {
        params.search_EQ_manageWay = this.form.manageWay, 
        params.search_EQ_measureWay = this.form.measureWay
      }
      this.findViceAccountApi(params);
    },
    findViceAccountApi(params) {
      params = this.pamarsFilter(params);
      findViceAccount(params).then(
        res => {
          this.viceAccountList = res.data.aaData
        }
      )
    },
    selectChange(val) {
      // 获取货物name
      if (this.form.cargoTypeCode === val) {
        this.form.cargoTypeName = val
      }
      // 品名
      this.selectGroductName = []
      for (let i = 0; i < this.selectGoodsType.length; i++) {
        if (this.selectGoodsType[i].cargoTypeCode === this.form.cargoTypeCode) {
          let obj = new Object()
          obj.cargoCode = this.selectGoodsType[i].cargoCode
          obj.cargoName = this.selectGoodsType[i].cargoName
          this.selectGroductName.push(obj)
        }
      }
    },
    handleMergeSelectionChange(val) {
      this.MergeMultipleSelection = val
    },
    handleAddTable(item) {
      let params = { ...item }
      params.sortNo = this.form.cargos.length + 1
      this.form.cargos.push(params)
    },
    handleRemove(index) {
      if (this.form.cargos.length === 1) {
        this.$message({ message: '至少需要一条数据!', type: 'error' })
      } else {
        this.form.cargos.splice(index, 1)
      }
    },
    // 保存
    handleSubmit() {
      let ids = []
      for(var i=0;i<this.MergeMultipleSelection.length;i++) {
        ids.push(this.MergeMultipleSelection[i].id)
      }
      // let params = {id:parseInt(this.id),sonIds:ids.substring(0, ids.lastIndexOf(','))}
      postMergeAccount(parseInt(this.id), {sonIds: ids}).then(res => {
        this.$message({ message: '合并成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 新增
    handleToAdd() {
      addThings(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    //获取id
    getId(val) {
      this.form.id = val
    },
    // 编辑
    handleToEdit() {
      updateThings(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 获取货物的name
    getName(index) {
      this.selectGroductName.forEach(element => {
        if (this.form.cargos[index].cargoCode === element.cargoCode) {
          this.form.cargos[index].cargoName = element.cargoName
        }
      })
    },
    pamarsFilter(param) {
      let pam = {}
      for(let i in param){
        if(param[i] != ''){
          pam[i] = param[i]
        }
      }
      return pam;
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style>
.gg-input .el-form-item__content .el-input {
  width: 100px !important;
}
</style>
